<template>
  <v-chart
    :ref='chartOption.refID'
    :theme='tdTheme'
    :autoresize='true'
    @click='onClick'
    :options='polar'
  />
</template>

<script>
import 'echarts'
import ECharts from 'vue-echarts'
import tdTheme from './theme.json'
import chartMixins from './chartMixins'

export default {
  name: 'ChartStackLine',
  components: {
    'v-chart': ECharts
  },
  mixins: [chartMixins],
  props: {},
  data() {
    return {
      tdTheme: tdTheme,
      polar: {},
      chartOption: {
        bottom: {
          type: Number,
          default: 20
        },
        rotate: {
          type: Number,
          default: 50
        },
        xAxis: Array,
        series: Array,
        refID: String,
        text: String,
        subText: String
      }
    }
  },
  methods: {
    init() {
      let seriesData = []
      let legendData = []

      const seriesPublicAttr = {
        type: 'line',
        stack: `stackLine-${Math.random()}`,
        // areaStyle: {},
        label: {
          show: false,
          position: 'bottom',
          formatter: function(params) {
            if (params.value > 0) {
              return params.value
            } else {
              return ''
            }
          }
        }
      }
      if (this.chartOption && this.chartOption.series && this.chartOption.series.forEach) {
        this.chartOption.series.forEach(val => {
          legendData.push(val.name)
          seriesData.push(Object.assign(val, seriesPublicAttr))
        })
      }


      let option = {
        toolbox: {// 工具栏,内置有导出图片，数据视图，动态类型切换，数据区域缩放，重置五个工具。
          orient: 'vertical',
          show: false,
          feature: {// 各工具配置项。
            dataView: {// 数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
              show: false, // 是否显示组件。
              readOnly: false
            },
            magicType: {// 动态类型切换 示例：feature: { magicType: {type: ['line', 'bar', 'stack', 'tiled']}}
              show: true,
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: {// 配置项还原。
              show: true
            },
            saveAsImage: {// 保存为图片。
              show: true
            }
          }
        },
        title: {
          top: 10,
          bottom: 10,
          left: '10%',
          text: this.chartOption.text,
          subtext: this.chartOption.subText
        },
        legend: {
          top: 20,
          bottom: 20,
          right: '10%',
          data: legendData
        },
        grid: {
          top: 70,
          bottom: this.chartOption.bottom,
          left: '17%',
          right: '5%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: 'gray'
            }
          }
        },
        xAxis: {
          axisLabel: { rotate: this.chartOption.rotate, interval: 0 },
          type: 'category',
          data: this.chartOption.xAxis,
          splitLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          width: '220',
          splitLine: {
            show: false
          }
        },
        series: seriesData
      }
      console.log('option=>', JSON.stringify(option))
      this.polar = option
    },
    onClick(event, instance, echarts) {
      console.log(event, instance, echarts)
      this.$emit('chartClick', arguments)
    }
  },
  watch: {
    series() {
      this.init()
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  }
}
</script>

<style scoped>
.echarts {
  width: 100%;
  height: 100%;
}
</style>
